import { Button } from 'antd-mobile'
import { observer, useLocalObservable } from 'mobx-react'
import { useHistory } from 'umi'
import { stores } from '@/stores'
import { RightOutline } from 'antd-mobile-icons'
import ContentBgImg from '@/static/login/login_bg.png'
import Store from './store'
import NavBar from '@/components/Global/NavBar'
import styles from './index.module.less'
import useWelcomeByRole from '../../home/hooks/useWelcomeByRole'

import SRC_ICON_BASIC from '@/static/personal/icon_flower.png'
import SRC_ICON_ACCOUNT from '@/static/personal/icon_lock.png'
import SRC_ICON_ROLE from '@/static/personal/icon_role.png'

const ListItem = (props: { icon?: string; title: string; hint: string; onClick: () => void }) => {
    return (
        <div className={styles.operate__list__item} onClick={props.onClick}>
            <div className={styles['operate__list__item--left']}>
                {props.icon && <img src={props.icon} className={styles.icon} />}
                <span>{props.title}</span>
            </div>
            <div className={styles['operate__list__item--right']}>
                <span>{props.hint}</span>
                <RightOutline className={styles.icon} />
            </div>
        </div>
    )
}

const UseCenter = () => {
    const { trainerInfo, outLogin } = useLocalObservable(() => new Store())

    const { userStore } = stores
    const isManager = userStore.isCenterRole
    const currentRole = userStore.getRoleInfo!.name
    /** 是否有多重身份 */
    const hasMultiRole = Object.keys(userStore.getRoleArr!).length > 1

    const history = useHistory()

    const { nowTime, nowWeekly, welcome } = useWelcomeByRole()

    const goAccount = () => {
        history.push('/personal/account')
    }
    const goBasicInfo = () => {
        history.push('/personal/basicInfo')
    }
    const goRoleCheck = () => {
        history.push('/personal/role')
    }

    return (
        <div className={styles.page}>
            <NavBar title={'个人中心'} />

            <div className={styles.header}>
                <img className={styles.ctxBgImg} src={ContentBgImg} />
                <span className={styles.welcome}>
                    {welcome}，{trainerInfo.name}
                </span>
                <span className={styles.date}>
                    {nowTime} {nowWeekly}
                </span>
            </div>

            <div className={styles.operate}>
                <div className={styles.operate__list}>
                    {!isManager && !stores.userStore.isStudentRole && (
                        <ListItem
                            icon={SRC_ICON_BASIC}
                            title="基础信息"
                            hint="查看"
                            onClick={goBasicInfo}
                        />
                    )}

                    <ListItem
                        icon={SRC_ICON_ACCOUNT}
                        title="账户密码"
                        hint="修改"
                        onClick={goAccount}
                    />

                    {hasMultiRole && (
                        <ListItem
                            icon={SRC_ICON_ROLE}
                            title="我的身份"
                            hint={currentRole}
                            onClick={goRoleCheck}
                        />
                    )}
                </div>

                <Button className={styles.logout} onClick={outLogin}>
                    退出登录
                </Button>
            </div>
        </div>
    )
}

export default observer(UseCenter)
